<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Tree Demos</title>
	<script type="text/javascript">
		var Global = {
			contextPath:'/bingo.ui.framework'
		} 
	</script>
	<script src="../../../../scripts/jquery.js" type="text/javascript"></script>
	<script src="../../../../scripts/jquery.utils.js" type="text/javascript"></script>
	
	<link  href="../../../../themes/default/ui.css" type="text/css" id="themesLink" rel="stylesheet" />
	
	<script src="../ui.tree.js" type="text/javascript"></script>
	<link  href="../ui.tree.css" rel="stylesheet" type="text/css" />

	<link type="text/css" href="../../../demos.css" rel="stylesheet" />
	<script src="../../../../scripts/jquery_plugins/jquery.json.js" type="text/javascript"></script>
	<!-- 换肤 -->
	<script type="text/javascript" src="../../../theme_cookie.js"></script>
	<style>
		.tree{
			width:200px;
		}
		
		button{
			width:150px;
			font-size: 80%;
		}
		
		.ns{
			font-size:80%;
		}
	</style>

	<script>
		$(function(){
			var data = {
				id:'11',
				text:'根节点',
				isExpand:true,
				childNodes:[
					{
						id:'21',
						text:'数据源表11',
						showCheck:true, //默认为true
						childNodes:[
							{
								id:'ss',
								text:'搜索',
								disabled:true,
								childNodes:[
									{
										id:'baidu',
										disabled:true,
										text:'百度'
									},
									{
										id:'google',
										text:'谷歌'
									}
								]
							}
						]
					},
					{
						id:'31',
						text:'数据源表二1',
						complete:false //表示需要异步加载
					}
				]
			 };

			var rootPath = window.location.href.substring(0,window.location.href.lastIndexOf("\/") + 1);
			
			$('#event-tree').tree({//tree为容器ID
            	method		:	'post',
            	asyn		:	true, //异步
            	url			:	rootPath + 'data.html',
            	dataProxy	:	{type:'data',value:data},//获取数据方式
            	onNodeClick	:	function(id, text, record,node){
            		$('.value').html('onNodeClick事件：<br/>'+ id +'&nbsp;&nbsp;&nbsp;&nbsp;'+text) ;
            	},
            	showCheck	:	true, //是否显示checkbox框 , 默认所有节点出现选择框
            	onCheck		:	function(id, text,checked, record,node){
            		$('.value').html('onCheck事件：<br/>'+ checked+"&nbsp;&nbsp;&nbsp;&nbsp;"+text ) ;
            	},
            	cascadeCheck:true, //级联选择，UP向上级联 DOWN向下级联 false不级联 true向上向下级联

            	onChecking  :function(id, text,checked, record){
            		$('.value').append( '<br/>(onChecking)选择节点开始：'+text+"---当前状态:"+checked ) ;
                },
                onChecked  :function(id, text,checked, record){
            		$('.value').append('<br/>(onChecked)选择节点结束') ;
                },
            	onUpdating  :function(id , item){
            		$('.value').html('更新事件：<br/>(onUpdating)开始更新节点:'+ id+"&nbsp;&nbsp;&nbsp;&nbsp;"+item.text ) ;
                },
				onUpdated  :function(id , item){
                	$('.value').append('<br/>(onUpdated)更新节点完成') ;
                },
                onAdding  :function(id , item){
            		$('.value').html('新增节点事件：<br/>(onAdding)开始新增节点:'+ id+"&nbsp;&nbsp;&nbsp;&nbsp;"+item.text ) ;
                },
				onAdded  :function(id , item){
                	$('.value').append('<br/>(onAdded)新增节点完成') ;
                },
                onDeleting  :function(id , item){
            		$('.value').html('删除节点事件：<br/>(onDeleting)开始删除节点:'+ id +"   "+item.text  ) ;
                },
				onDeleted  :function(id , item){
                	$('.value').append('<br/>(onDeleted)删除节点完成') ;
                },onLoaded :function(){
                	$('.value').append('onLoaded:数据加载完成') ;
                },
                onExpand :function( id , item, isRender , isLoaded ){// isRender是否已经渲染完成，isLoaded是否加载完成
					var rs = isRender?"该节点子节点已经渲染完成":"该节点子节点还未渲染" ;
					var ls = isLoaded?"该节点子节点已经加载完成":"该节点子节点还未加载" ;
                	$('.value').html(["节点"+id+"开始展开：",rs,ls].join('<br/> ')) ;
                }
            }) ;


            $('.deleteNode').click(function(){
            	var vals = $('#event-tree').tree().getCurrentNode()  ;
            	if(vals == undefined || vals == null || vals.id == undefined){
            		alert('请先点击要删除的节点，再点击删除节点按钮。');
            	}else{
            		$('#event-tree').tree().deleteNode(vals.id) ;	
            	}
            }) ;

            $('.updateNode').click(function(){
            	$('#event-tree').tree().updateNode( {id:'31',text:'已经修改'}) ;	
            }) ;

            $('.addNode').click(function(){
            	var vals = $('#event-tree').tree().getCurrentNode()  ;
            	if(vals == undefined || vals == null || vals.id == undefined){
            		alert('请先点击要添加的节点，再点击添加节点按钮。');
            	}else{
            		$('#event-tree').tree().addNode( {id:'21001',text:'动态添加',parentId:vals.id}) ;	
            	}
            }) ;
            
		}) ;
	</script>
	
</head>

<body>
   <div style="float:left;width:200px;">
	<hr/>
	<button class='deleteNode'>删除节点</button><br/>
	<button class='updateNode'>修改节点</button><br/>
	<button class='addNode'>添加节点</button><br/>
	<br>
   </div>
	
	<div id='content-event' class='demo' style="float:left">
		
		<div id="event-tree" class="tree"></div>
		<br />
		<div class="ui-state-highlight value" style="width:300px;"></div>
		
	</div>
</body>
</html>